<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" />
    <div class="flex mt24">
      <el-card shadow="never" :body-style="{ padding: '12px 10px 12px' }">
        <div slot="header" class="mb9 f16">
          <span style="font-weight: 600">选择指令</span>
        </div>
        <Table :tableData="tableData" :tableHeader="tableHeader" :TableHeight="550" />
      </el-card>

      <el-card shadow="never" :body-style="{ padding: '12px 36px 12px' }">
        <div slot="header" class="mb9 f16">
          <span style="font-weight: 600">选择指令</span>
        </div>
        <Table :tableData="tableData2" :tableHeader="tableHeader2" :TableHeight="550" />
      </el-card>

      <el-card shadow="never" :body-style="{ padding: '0' }">
        <el-card shadow="never" :body-style="{ padding: '12px 10px 12px' }">
          <div slot="header" class="mb9 f16">
            <span style="font-weight: 600">收料明细</span>
          </div>
          <Table :tableData="tableData3" :tableHeader="tableHeader3" :TableHeight="220" />
        </el-card>

        <el-card shadow="never" :body-style="{ padding: '12px 10px 12px' }">
          <div slot="header" class="mb9 f16">
            <span style="font-weight: 600">发料明细</span>
          </div>
          <Table :tableData="tableData4" :tableHeader="tableHeader4" :TableHeight="220" />
        </el-card>

        <el-card shadow="never" :body-style="{ padding: '12px 0px 12px' }" class="lastCard">
          <div class="btns">
            <el-button class="bg" type="primary" size="default" @click="">保存</el-button>
            <el-button type="primary" size="default" @click="">打印</el-button>
          </div>
        </el-card>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'BottomWarehouseWarehouse'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入颜色',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectLabel: '部位',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '111111',
        optionLabel: 'option1'
      },
      {
        optionKey: '2',
        optionValue: '222222',
        optionLabel: 'option2'
      },
      {
        optionKey: '19',
        optionValue: 'option19',
        optionLabel: 'option19'
      }
    ]
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'input',
    inputLabel: '型体',
    inputDisabled: true,
    inputValue: 'BF21068'
  },
  {
    type: 'input',
    inputLabel: '颜色',
    inputDisabled: true,
    inputValue: '黑色/银色'
  },
  {
    type: 'input',
    inputLabel: '订单数量',
    inputDisabled: true,
    inputValue: '624'
  },
  {
    type: 'color',
    color1: '#3FFF38',
    color1Val: '发料结束',
    color2: '#5daeff',
    color2Val: '入库结束'
  }
])

const tableHeader = ref([
  {
    label: '指令',
    prop: 'instruction'
  },
  {
    label: '部位',
    prop: 'part'
  },
  {
    label: '库存数量',
    prop: 'inventory'
  },
  {
    label: '底模',
    prop: 'bottomMould'
  },
  {
    label: '入库欠',
    prop: 'warehouseOwe'
  },
  {
    label: '发料欠',
    prop: 'materialOwe'
  }
])
const tableData = ref([
  {
    instruction: 'BF21068',
    part: '左',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '右',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '左',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '右',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '左',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '右',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '左',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '左',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '右',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '左',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '右',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '左',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '右',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '左',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '左',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '右',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '左',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '右',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '左',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '右',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '左',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '右',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '左',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '右',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '左',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  },
  {
    instruction: 'BF21068',
    part: '右',
    inventory: '624',
    bottomMould: 'BF21068',
    warehouseOwe: '0',
    materialOwe: '0'
  }
])

const tableHeader2 = ref([
  {
    label: '号码',
    prop: 'number'
  },
  {
    label: '订单数量',
    prop: 'orderNumber'
  },
  {
    label: '已入数量',
    prop: 'alreadyNumber'
  },
  {
    label: '正单欠数',
    prop: 'oweNumber'
  },
  {
    label: '预补欠数',
    prop: 'preOweNumber'
  },
  {
    label: '已发数量',
    prop: 'alreadySendNumber'
  },
  {
    label: '发料欠数',
    prop: 'sendOweNumber'
  },
  {
    label: '库存数量',
    prop: 'inventoryNumber'
  }
])
const tableData2 = ref([
  {
    number: 'BF21068',
    orderNumber: '624',
    alreadyNumber: '624',
    oweNumber: '0',
    preOweNumber: '0',
    alreadySendNumber: '0',
    sendOweNumber: '0',
    inventoryNumber: '0'
  },
  {
    number: 'BF21068',
    orderNumber: '624',
    alreadyNumber: '624',
    oweNumber: '0',
    preOweNumber: '0',
    alreadySendNumber: '0',
    sendOweNumber: '0',
    inventoryNumber: '0'
  },
  {
    number: 'BF21068',
    orderNumber: '624',
    alreadyNumber: '624',
    oweNumber: '0',
    preOweNumber: '0',
    alreadySendNumber: '0',
    sendOweNumber: '0',
    inventoryNumber: '0'
  },
  {
    number: 'BF21068',
    orderNumber: '624',
    alreadyNumber: '624',
    oweNumber: '0',
    preOweNumber: '0',
    alreadySendNumber: '0',
    sendOweNumber: '0',
    inventoryNumber: '0'
  },
  {
    number: 'BF21068',
    orderNumber: '624',
    alreadyNumber: '624',
    oweNumber: '0',
    preOweNumber: '0',
    alreadySendNumber: '0',
    sendOweNumber: '0',
    inventoryNumber: '0'
  },
  {
    number: 'BF21068',
    orderNumber: '624',
    alreadyNumber: '624',
    oweNumber: '0',
    preOweNumber: '0',
    alreadySendNumber: '0',
    sendOweNumber: '0',
    inventoryNumber: '0'
  },
  {
    number: 'BF21068',
    orderNumber: '624',
    alreadyNumber: '624',
    oweNumber: '0',
    preOweNumber: '0',
    alreadySendNumber: '0',
    sendOweNumber: '0',
    inventoryNumber: '0'
  },
  {
    number: 'BF21068',
    orderNumber: '624',
    alreadyNumber: '624',
    oweNumber: '0',
    preOweNumber: '0',
    alreadySendNumber: '0',
    sendOweNumber: '0',
    inventoryNumber: '0'
  },
  {
    number: 'BF21068',
    orderNumber: '624',
    alreadyNumber: '624',
    oweNumber: '0',
    preOweNumber: '0',
    alreadySendNumber: '0',
    sendOweNumber: '0',
    inventoryNumber: '0'
  },
  {
    number: 'BF21068',
    orderNumber: '624',
    alreadyNumber: '624',
    oweNumber: '0',
    preOweNumber: '0',
    alreadySendNumber: '0',
    sendOweNumber: '0',
    inventoryNumber: '0'
  },
  {
    number: 'BF21068',
    orderNumber: '624',
    alreadyNumber: '624',
    oweNumber: '0',
    preOweNumber: '0',
    alreadySendNumber: '0',
    sendOweNumber: '0',
    inventoryNumber: '0'
  },
  {
    number: 'BF21068',
    orderNumber: '624',
    alreadyNumber: '624',
    oweNumber: '0',
    preOweNumber: '0',
    alreadySendNumber: '0',
    sendOweNumber: '0',
    inventoryNumber: '0'
  },
  {
    number: 'BF21068',
    orderNumber: '624',
    alreadyNumber: '624',
    oweNumber: '0',
    preOweNumber: '0',
    alreadySendNumber: '0',
    sendOweNumber: '0',
    inventoryNumber: '0'
  },
  {
    number: 'BF21068',
    orderNumber: '624',
    alreadyNumber: '624',
    oweNumber: '0',
    preOweNumber: '0',
    alreadySendNumber: '0',
    sendOweNumber: '0',
    inventoryNumber: '0'
  },
  {
    number: 'BF21068',
    orderNumber: '624',
    alreadyNumber: '624',
    oweNumber: '0',
    preOweNumber: '0',
    alreadySendNumber: '0',
    sendOweNumber: '0',
    inventoryNumber: '0'
  },
  {
    number: 'BF21068',
    orderNumber: '624',
    alreadyNumber: '624',
    oweNumber: '0',
    preOweNumber: '0',
    alreadySendNumber: '0',
    sendOweNumber: '0',
    inventoryNumber: '0'
  },
  {
    number: 'BF21068',
    orderNumber: '624',
    alreadyNumber: '624',
    oweNumber: '0',
    preOweNumber: '0',
    alreadySendNumber: '0',
    sendOweNumber: '0',
    inventoryNumber: '0'
  },
  {
    number: 'BF21068',
    orderNumber: '624',
    alreadyNumber: '624',
    oweNumber: '0',
    preOweNumber: '0',
    alreadySendNumber: '0',
    sendOweNumber: '0',
    inventoryNumber: '0'
  },
  {
    number: 'BF21068',
    orderNumber: '624',
    alreadyNumber: '624',
    oweNumber: '0',
    preOweNumber: '0',
    alreadySendNumber: '0',
    sendOweNumber: '0',
    inventoryNumber: '0'
  },
  {
    number: 'BF21068',
    orderNumber: '624',
    alreadyNumber: '624',
    oweNumber: '0',
    preOweNumber: '0',
    alreadySendNumber: '0',
    sendOweNumber: '0',
    inventoryNumber: '0'
  }
])

const tableHeader3 = ref([
  {
    label: '入货厂商',
    prop: 'name'
  },
  {
    label: '入货日期',
    prop: 'date'
  },
  {
    label: '入货数量',
    prop: 'number'
  },
  {
    label: '操作员',
    prop: 'operator'
  }
])
const tableData3 = ref([
  {
    name: '厂商1',
    date: '2021-01-01',
    number: '100',
    operator: '张三'
  },
  {
    name: '厂商1',
    date: '2021-01-01',
    number: '100',
    operator: '张三'
  },
  {
    name: '厂商1',
    date: '2021-01-01',
    number: '100',
    operator: '张三'
  },
  {
    name: '厂商1',
    date: '2021-01-01',
    number: '100',
    operator: '张三'
  },
  {
    name: '厂商1',
    date: '2021-01-01',
    number: '100',
    operator: '张三'
  },
  {
    name: '厂商1',
    date: '2021-01-01',
    number: '100',
    operator: '张三'
  },
  {
    name: '厂商1',
    date: '2021-01-01',
    number: '100',
    operator: '张三'
  },
  {
    name: '厂商1',
    date: '2021-01-01',
    number: '100',
    operator: '张三'
  },
  {
    name: '厂商1',
    date: '2021-01-01',
    number: '100',
    operator: '张三'
  },
  {
    name: '厂商1',
    date: '2021-01-01',
    number: '100',
    operator: '张三'
  }
])

const tableHeader4 = ref([
  {
    label: '领用部门',
    prop: 'name'
  },
  {
    label: '领用日期',
    prop: 'date'
  },
  {
    label: '领用数量',
    prop: 'number'
  },
  {
    label: '操作员',
    prop: 'operator'
  }
])
const tableData4 = ref([
  {
    name: '部门1',
    date: '2021-01-01',
    number: '100',
    operator: '张三'
  },
  {
    name: '部门1',
    date: '2021-01-01',
    number: '100',
    operator: '张三'
  },
  {
    name: '部门1',
    date: '2021-01-01',
    number: '100',
    operator: '张三'
  },
  {
    name: '部门1',
    date: '2021-01-01',
    number: '100',
    operator: '张三'
  },
  {
    name: '部门1',
    date: '2021-01-01',
    number: '100',
    operator: '张三'
  },
  {
    name: '部门1',
    date: '2021-01-01',
    number: '100',
    operator: '张三'
  },
  {
    name: '部门1',
    date: '2021-01-01',
    number: '100',
    operator: '张三'
  },
  {
    name: '部门1',
    date: '2021-01-01',
    number: '100',
    operator: '张三'
  },
  {
    name: '部门1',
    date: '2021-01-01',
    number: '100',
    operator: '张三'
  },
  {
    name: '部门1',
    date: '2021-01-01',
    number: '100',
    operator: '张三'
  }
])
</script>

<style lang="less" scoped>
.lastCard {
  :deep(.el-card__body:last-child) {
    display: flex;
    height: 100%;
    flex-direction: column-reverse;
    align-items: end;
  }

  .btns {
    display: flex;
    margin: 10px 20px 0px;

    .bg {
      background-color: #e7e7e7;
      border: 1px solid #e7e7e7;
      color: #000000;
    }
  }
}
</style>
